@import "../mixins/vars";

.animating {
    animation-duration: 200ms;
    animation-fill-mode: both;
    animation-play-state: paused;
    &.animating-enter-active, &.animating-leave-active {
        animation-play-state: running;
    }
    &.animating-leave-active {
        pointer-events: none;
    }
}

//region "淡入淡出"

.fade-enter {
    opacity: 0.01;
    &.fade-enter-active {
        opacity: 1;
        transition: opacity 300ms ease-in;
    }
}

.fade-leave {
    opacity: 1;
    &.fade-leave-active {
        opacity: 0.01;
        transition: opacity 200ms ease-in;
    }
}

//endregion

//region "缩放进入/离开"

.zoom-enter {
    animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
    &.zoom-enter-active {
        animation-name: zoomIn;
    }
}

.zoom-leave {
    animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
    &.zoom-leave-active {
        animation-name: zoomOut;
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.1);
    }
}

//endregion

//region "上移进入/离开"
.move-up-enter-active {
    animation-name: moveUpIn;
}

@keyframes moveUpIn {
    0% {
        transform-origin: 0 0;
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform-origin: 0 0;
        transform: translateY(0%);
        opacity: 1;
    }
}

.move-up-leave-active {
    animation-name: moveUpOut;
}

@keyframes moveUpOut {
    0% {
        transform-origin: 0 0;
        transform: translateY(0%);
        opacity: 1;
    }
    100% {
        transform-origin: 0 0;
        transform: translateY(-100%);
        opacity: 0;
    }
}
//endregion

//region "下移进入/离开"

.move-down-enter-active {
    animation-name: moveDownIn;
}
.move-down-leave-active {
    animation-name: moveDownOut;
}

@keyframes moveDownIn {
    0% {
        transform-origin: 0 0;
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform-origin: 0 0;
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes moveDownOut {
    0% {
        transform-origin: 0 0;
        transform: translateY(0%);
        opacity: 1;
    }
    100% {
        transform-origin: 0 0;
        transform: translateY(100%);
        opacity: 0;
    }
}

//endregion

//region "右移进入/离开"
.move-right-enter-active {
    animation-name: moveRightIn;
}

@keyframes moveRightIn {
    0% {
        transform-origin: 0 0;
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform-origin: 0 0;
        transform: translateX(0%);
        opacity: 1;
    }
}

.move-right-leave-active {
    animation-name: moveRightOut;
}

@keyframes moveRightOut {
    0% {
        transform-origin: 0 0;
        transform: translateX(0%);
        opacity: 1;
    }
    100% {
        transform-origin: 0 0;
        transform: translateX(100%);
        opacity: 0;
    }
}
//endregion

//region "左移进入/离开"
.move-left-enter-active {
    animation-name: moveLeftIn;
}

@keyframes moveLeftIn {
    0% {
        transform-origin: 0 0;
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform-origin: 0 0;
        transform: translateX(0%);
        opacity: 1;
    }
}

.move-left-leave-active {
    animation-name: moveLeftOut;
}

@keyframes moveLeftOut {
    0% {
        transform-origin: 0 0;
        transform: translateX(0%);
        opacity: 1;
    }
    100% {
        transform-origin: 0 0;
        transform: translateX(-100%);
        opacity: 0;
    }
}
//endregion

//region "淡入淡出+Y轴缩放"
.slide-up-enter-active {
    animation-name: slideUpIn;
}

@keyframes slideUpIn {
    0% {
        transform: scaleY(0.5);
        opacity: 0;

    }
    100% {
        //transform-origin: 0 0;
        transform: scaleY(1);
        opacity: 1;
    }
}

.slide-up-leave-active {
    animation-name: slideUpOut;
}

@keyframes slideUpOut {
    0% {
        transform: scaleY(1);
        opacity: 1;
    }
    100% {
        transform: scaleY(0.5);
        opacity: 0;
    }
}

//endregion


/**
    旋转360
 */
@keyframes rotate {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(359deg)
    }
}
